.button {
  width: 5vw;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;

  &.btn-right {
    background-image: url(@/assets/screenboard/carousel-right.png);
  }

  &.btn-left {
    background-image: url(@/assets/screenboard/carousel-left.png);
  }
}

.carousel-area {
  color: #fff;
  display: grid;
  margin-top: 20px;
  height: 100% !important;
  grid-template-columns: 5vw 43vw 5vw;
  grid-gap: 0.5vw 0.5vw;
  overflow: hidden;
}

.carousel {

  overflow: hidden;
  width: 100%;

  .carousel-main {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    .carousel-main-panel {
      border-radius: 26px;
      border: 1px solid rgba(46, 105, 235, 0.5);
      // width: 13.6vw;
      height: calc(100% - 45px);
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      header {
        // width: 13.6vw;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #EDFAFF;
        line-height: 20px;
        text-shadow: 0px 2px 6px #1FC3FF, 0px 2px 11px rgba(0, 41, 131, 0.59);

        b {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #2AF2FC;
          box-shadow: 0px 2px 8px 1px #3C9EFF;
          vertical-align: 1px;
        }
      }

      dl {
        width: 100%;

        dt {
          width: 100%;

          &.title {
            display: flex;
            justify-content: space-between;
            height: 18px;
            font-size: 13px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            line-height: 18px;
          }

          &.desc {
            text-align: right;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(42, 242, 252, 0.8);
            line-height: 17px;
          }
        }

        dd {
          width: 100%;
          height: 20px;
          border: 1px solid rgba(42, 242, 252, 0.2);
          margin: 5px 0;
          position: relative;

          p {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: flex;
            flex-wrap: nowrap;
            width: calc(100% - 6px);
            height: calc(100% - 6px);
            margin: 3px;

            span {
              width: 10%;
              height: 100%;


              &+span {
                border-left: 3px solid rgb(0, 6, 22);
              }
            }
          }

          div {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: calc(100% - 6px);
            height: calc(100% - 6px);
            margin: 3px;
            background: linear-gradient(270deg, #2AF2FC 0%, rgba(42, 242, 252, 0) 100%);
          }
        }

        &:nth-child(3) {
          dd {
            border-color: rgba(46, 105, 235, 0.5000);

            div {

              background: linear-gradient(270deg, #2E69EB 0%, rgba(46, 105, 235, 0) 100%);
            }
          }

          .desc {
            color: rgba(46, 105, 235, 0.5000);
          }
        }

        &:nth-child(4) {
          dd {
            border-color: rgba(255, 176, 67, 0.2900);

            div {

              background: linear-gradient(270deg, #FFB043 0%, rgba(255, 176, 67, 0) 100%);
            }
          }

          .desc {
            color: rgba(255, 176, 67, 0.7500);
          }
        }

      }

      &+.carousel-main-panel {
        margin-left: 1vw;
      }
    }
  }

}

.carousel::-webkit-scrollbar {
  display: none;
}